<template>
  <div class="index" v-loading="loading">
    <div class="mian">
        <div class="wrap">
            <div class="crumbs flex">
                <router-link to="/" class="p">首页</router-link>
                <div class="p">>{{title}}</div>
            </div>
            <div class="service-title">
                <h2>资讯中心</h2>
                <p>Information Center</p>
            </div>
            <div class="con">
                <div class="left">
                    <div class="li" @click="togNav('/information')">台商区介绍</div>
                    <div class="li" @click="togNav('/information/indexe')">新闻动态</div>
                    <div class="li" @click="togNav('/information/indexa')">园区介绍</div>
                    <div class="li" @click="togNav('/information/indexb')">通知公告</div>
                    <div class="li" @click="togNav('/information/indexc')">创业</div>
                    <div class="li on" @click="togNav('/information/indexd')">求学</div>
                </div>
                <div class="right-list">
                    <div class="t-li flex-ali" v-for="(item,i) in list" :key="i" @click="togNav('/information/details?id='+item.id+'&p=6')">
                        <div class="img" :style="{background: 'url('+item.imgUrl+') center no-repeat',backgroundSize:'cover'}"></div>
                        <div class="info">
                            <div class="title">{{item.title}}</div>
                            <div class="p">{{item.abstractDesc}}</div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <el-pagination
                background
                prev-text="上一页"
                next-text="下一页"
                layout="prev, pager, next"
                @current-change="curPage"
                :page-size="req.limit"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
import {findAllLista} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
        img:"http://sznews.tetimes.com/uploads/allimg/201012/8-20101223340D02.png",
        req: {
            limit: 6,
            page: 1,
            bigCategory:6,
        },
        total:0,
        list:[],                            //列表数据
        loading:false,
        title:""                           
    }
  },
  created(){
    if(this.$route.meta){
        this.title = this.$route.meta.title;
    }
    
  },
  mounted(){
    this.findAllListapi()
  },
  methods:{
    togNav(e){
        this.$router.push(e)
    },
    curPage(e){
      this.req.page = e;
      this.findAllListapi()
    },
    findAllListapi(){
        this.loading = true;
      findAllLista(this.req).then(res=>{
          this.loading = false;
        if(res.code === 0){
          this.total = res.total;
          this.list = res.data;
        }
      })
    },
  }
}
</script>
<style scoped>
.mian{
    padding-bottom: 100px;
    background: #fff;
}
.wrap{
    width: 1200px;
    margin: auto;
}
.crumbs{
    padding: 10px 0 0 0;
}
.crumbs .p{
    font-size: 14px;
}
.con{
    margin: auto;
    position: relative;
    width: 1000px;
    min-height: 248px;
}
.con .left{
    position: absolute;
    left: -236px;
    width: 218px;
    top: 10px;
}
.con .left .li{
    width: 100%;
    background: #E8E8E8;
    line-height: 48px;
    height: 48px;
    color: #333333;
    font-size: 18px;
    text-align: center;
    cursor:pointer;
}
.con .left .li.on{
    background: #3DABC4;
    color: #fff;   
}
.right-list .t-li{
    box-shadow: 0px 6px 30px 6px rgba(102, 89, 115, 0.08);
    padding: 10px;
    background: #fff;
    margin: 10px 0;
    border-radius: 6px;
    cursor:pointer;
}
.right-list .t-li .img{
    flex-shrink: 0;
    flex-grow: 0;
    width: 200px;
    height: 132px;
    border-radius: 6px;
}
.right-list .t-li .info{
    padding: 0 20px;
}
.right-list .t-li .info .title{
    font-size: 18px;
    color: #333333;
    padding-bottom: 12px;

}
.right-list .t-li .info .p{
    font-size: 12px;
    color: #666666;
    line-height: 18px;
}
@media (min-width: 1680px) {
    .con{
        position: relative;
        width: 100%;
    }
}
</style>